<template>
  <el-date-picker
    v-model="currValue"
    type="datetime"
    style="width: 100%"
    :format="props.format"
    :value-format="props.valueFormat"
    @change="handleChange"
    @blur="handleBlur"
  />
</template>

<script setup>
import { ref, watch } from 'vue';
import date from '@/utils/date';

const modelValue = defineModel();
const emit = defineEmits(['change', 'blur']);
const props = defineProps({
  format: {
    type: String,
    default: 'YYYY-MM-DD HH:mm:ss'
  },
  valueFormat: {
    type: String,
    default: 'YYYY-MM-DD HH:mm:ss'
  },
});

const currValue = ref('');

const handleChange = (val) => {
  modelValue.value = date.parseLongDate(currValue.value);
  emit('change', val);
};

const handleBlur = (event) => {
  modelValue.value = date.parseLongDate(currValue.value);
  emit('blur', event);
};

watch(() => modelValue.value, (newVal) => {
  currValue.value = date.formatLongDate(newVal);
}, {immediate: true});
</script>